<template>
  <div class="menuAll">
    <div class="nav">
      <div class="title">
        <a href="https://www.openharmony.cn/">
          <img class="logo-pic"
               src="../assets/images/title.png" />
        </a>
      </div>
      <div class="closeMenu">
        <img @click="closeMenuPhone"
             src="../assets/images/close.png" />
      </div>
    </div>
    <div class="menuPhone">
      <van-tree-select height="95vh"
                       :items="items"
                       :active-id.sync="activeId"
                       :main-active-index.sync="activeItem"
                       @click-item="clickItem"></van-tree-select>
    </div>
  </div>
</template>

<script>
// import { Popup } from "vant";
// import { TreeSelect } from "vant";
export default {
  data () {
    return {
      activeItem: 0,
      activeId: 0,
      items: [
        {
          text: "下载",
          children: [
            {
              text: "下载",
              id: 1,
              url: "https://www.openharmony.cn/download/",
            }
          ],
          // dot: true,
        },
        {
          text: "学习",
          children: [
            {
              text: "文档",
              id: 1,
              url: "https://www.openharmony.cn/documents/",
            },
            { text: "学院", id: 2, name: "videoList", nameId: 5 },
            { text: "开发样例", id: 3, url: "http://139.159.252.23:9067/mainPlay/content/mainText/allFeatures" },
          ],
          //   badge: 5,
        },
        {
          text: "互动",
          children: [
            { text: "新闻", id: 1, name: "newList", nameId: 3 },
            { text: "博客", id: 2, name: "blogList", nameId: 2 },
            { text: "直播", id: 3, name: "liveList", nameId: 4 },
            { text: "活动", id: 4, name: "activityList", nameId: 1 },
            {
              text: "峰会",
              id: 5,
              url: "https://www.openharmony.cn/activities/hdc2021/",
            },
          ],
          //   badge: 5,
        },
        {
          text: "社区",
          children: [
            {
              text: "行为守则",
              id: 1,
              url: "https://www.openharmony.cn/projects_management/",
            },
            {
              text: "贡献攻略",
              id: 2,
              url: "https://www.openharmony.cn/community/contribution/",
            },
            {
              text: "找到兴趣组SIG",
              id: 3,
              url: "https://www.openharmony.cn/sig_management/",
            },
            {
              text: "订阅邮件列表",
              id: 4,
              url: "https://www.openharmony.cn/community/maillist/",
            },
            {
              text: "社区成长路径",
              id: 5,
              url: "https://www.openharmony.cn/community/introduction/",
            },
            {
              text: "项目管理委员会（PMC）",
              id: 6,
              url: "https://www.openharmony.cn/community/pmc/",
            }
          ],
          //   badge: 5,
        },
        {
          text: "兼容性认证",
          children: [
            {
              text: "申请认证", id: 1, url: "https://www.openharmony.cn/old/#/Compatibility_test"
            },
            { text: "认证结果", id: 2, name: "armList", nameId: null },
          ],
          //   badge: 5,
        },
        {
          text: "关于我们",
          children: [
            {
              text: "工作委员会", id: 1, url: "https://www.openharmony.cn/projects_management/#_4-2-工作委员会"
            },
            {
              text: "技术指导委员会", id: 2, url: "https://www.openharmony.cn/projects_management/#_4-5-技术指导委员会-tsc"
            },
            {
              text: "捐赠人",
              id: 3,
              url: "https://www.openharmony.cn/members/",
            },
          ],
          //   badge: 5,
        },
      ],
    };
  },
  methods: {
    closeMenuPhone () {
      this.$router.push("/mainPlay");
    },
    clickItem (data) {
      let u = navigator.userAgent;
      let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1;
      let isIos = !!u.match(/\(i[^;]+;(U;)? CPU.+Mac OS X/);
      // console.log(item);
      if (data.url) {
        if (isIos) {
          window.location.href = data.url;
        } else {
          window.open(data.url);
        }
      } else if (data.name) {
        this.$router.push({ name: data.name, query: { id: data.nameId } });
      }
      console.log("data");
    },
  },
};
</script>

<style lang="less" scoped>
.menuAll {
  //   display: flex;
  //   flex-direction: column;
  .nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 46px;
    background: #ffffff;
    box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.06);
    .title {
      margin-left: 12px;
      height: 46px;
      line-height: 46px;
      text-align: center;
      .logo-pic {
        width: 152px;
        height: 22px;
      }
    }
    .closeMenu {
      height: 46px;
      line-height: 46px;
      text-align: center;
      margin-right: 16px;
    }
  }
  .menuPhone {
    height: 621px;
    // background: #ffffff;
    ::v-deep .van-tree-select {
      height: 100vh;
      .van-sidebar-item--select::before {
        background-color: #00a6f9;
      }
      .van-tree-select__item--active {
        color: #00a6f9;
      }
      .van-tree-select__selected {
        display: none;
      }
      .van-tree-select__item {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        color: rgba(51, 51, 51, 0.85);
      }
    }
  }
}
</style>
